<template>
	<view>
		<view class="box">
			<view class="cont">
				
				<view class="top">
					<view class="top-l">
						<image :src="personInfo.image" mode=""></image>
					</view>
					<view class="top-r">
						<view class="top-r-b">
							{{ personInfo.name }}
						</view>
						<view class="top-r-m">
						</view>
						<view class="top-r-t">
							{{personInfo.job}}
						</view>
					</view>
				</view>
				<view class="model" v-html="personInfo.project_content">
				</view>
				<!-- <view class="images">
					<image src="https://d-chanxiangjc.bigchun.com/static/rebg.png" mode=""></image>
				</view>
				<view class="model">
					这里是人物介绍，文本文本文本，文本文本文本文本文本文本文本文，本文本文本文本本文本文，本文本文本文，本文本文本文本。
				</view> -->
			</view>
<!--			<view class=" cent comt">-->
<!--				<view class="cent-pr">-->
<!--					<view class="cent-pr-l" >-->
<!--						<view class="cent-pr-t">-->
<!--					<image src="https://d-chanxiangjc.bigchun.com/static/shu.png" mode="" class="img"></image>-->
<!--						</view>资讯-->
<!--					</view>-->
<!--					<view class="cent-pr-r">-->
<!--						<view class="cent-pr-r-t">-->
<!--							更多-->
<!--						</view>-->
<!--						<image src="../../../static/left.png" mode="" class="cent-pr-r-t-img"></image>-->
<!--					</view>-->
<!--				</view>-->
<!--				<view class="cent-bo">-->
<!--					<view class="cent-bo-b" v-for="(item,index) in personInfo.zixun"  :key ="item.id" @click="stockThuo(item.id)">-->
<!--						<view class="cent-bo-b-l">-->
<!--							<image :src="item.image" mode="" class="cent-bo-b-img"></image>-->
<!--						</view>-->
<!--						<view class="cent-bo-b-r">-->
<!--							<view class="cent-bo-b-r-t">-->
<!--			-->
<!--								{{ item.title }}-->
<!--							</view>-->
<!--							<view class="cent-bo-b-r-b">-->
<!--								{{item.project_content}}-->
<!--							-->
<!--							</view>-->
<!--						</view>-->
<!--					</view>-->
<!--				</view>-->
<!--			</view>-->
<!--			<view class=" cent comt">-->
<!--				<view class="cent-pr">-->
<!--					<view class="cent-pr-l" >-->
<!--						<view class="cent-pr-t">-->
<!--					<image src="../../../static/shu.png" mode="" class="img"></image>-->
<!--						</view>活动预告-->
<!--					</view>-->
<!--					<view class="cent-pr-r">-->
<!--						<view class="cent-pr-r-t">-->
<!--							更多-->
<!--						</view>-->
<!--						<image src="../../../static/left.png" mode="" class="cent-pr-r-t-img"></image>-->
<!--					</view>-->
<!--				</view>-->
<!--				<view class="cent-bo">-->
<!--					<view class="cent-bo-b" v-for="(item,index) in personInfo.huodong" :key ="item.id" @click="stockThuo(item.id)">-->
<!--						<view class="cent-bo-b-l">-->
<!--							<image :src="item.image" mode="" class="cent-bo-b-img"></image>-->
<!--						</view>-->
<!--						<view class="cent-bo-b-r">-->
<!--							<view class="cent-bo-b-r-t">-->
<!--			-->
<!--								{{item.title}}-->
<!--							</view>-->
<!--							<view class="cent-bo-b-r-b" v-html="item.project_content">-->
<!--							</view>-->
<!--						</view>-->
<!--					</view>-->
<!--				</view>-->
<!--			</view>-->
			
		</view>
	</view>
</template>

<script>
	import http from '@/shopro/request/index.js';
	export default {
		data() {
			return {
				personInfo:{}
			};
		},
		onLoad(options) {
			this.getDetail(options.id)
		},
		methods:{
			getDetail(id){
				http('city.personDetail',{id})
				.then(res=>{
					console.log(res);
					this.personInfo = res.data
				})
				.catch((err) => {
					
				})
			},
			stockThuo(id){
				uni.navigateTo({
					url:'./h_detlis?id=${id}'
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;
	}
	.img{
		width: 10rpx;
		height: 36rpx;
		margin-right: 21rpx;
	}
.cmot  {
		.cent-bo-b-r-t {
			margin-bottom: 0;
		}

		.cent-bo-b-r-b {
			margin-top: 60rpx;
		}
	}

	.cent {
		height: 100%;
        padding: 0 30rpx;
		.cent-pr {
			margin: 33rpx 0 34rpx;
			display: flex;
			justify-content: space-between;

			.cent-pr-l {
				display: flex;
				font-family: PingFang;
				font-weight: bold;
				font-size: 32rpx;
				color: #010101;

				.cent-pr-t {
					color: #666;
				}
			}

			.cent-pr-r {
				display: flex;
				font-family: PingFang;
				font-weight: 500;
				font-size: 28rpx;
				color: #999999;
				line-height: 32rpx;

				.cent-pr-r-t-img {
					width: 14rpx;
					height: 25rpx;
					margin-top: 7rpx;
					margin-left: 10rpx;
				}
			}
		}

		.cent-bo {
			.cent-bo-b {
				height: 200rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				margin-bottom: 20rpx;
				display: flex;

				.cent-bo-b-l {
					.cent-bo-b-img {
						width: 200rpx;
						height: 140rpx;
						margin: 30rpx 21rpx;
					}
				}

				.cent-bo-b-r {
					.cent-bo-b-r-t {
						margin-top: 30rpx;
						margin-bottom: 35rpx;

						.cent-bo-b-l {
							font-family: PingFang;
							font-weight: bold;
							font-size: 32rpx;
							color: #000000;
							line-height: 30rpx;
							display: flex;

							.cent-bo-b-r {
								margin-left: 25rpx;
							}
						}

						.cent-bo-b-r-b {
							font-family: PingFang;
							font-weight: 500;
							font-size: 30rpx;
							color: #666666;
							line-height: 42rpx;
						}
					}
				}
			}

		}

		.cent-box {
			// width: 690rpx;
			// height: 600rpx;
			background: #FFFFFF;
			border-radius: 16rpx;

			.cent-bo-b {
				border-bottom: 1rpx solid #F0F0F0;
				display: flex;
				padding: 0 20rpx;
				height: 96rpx;

				.cent-bo-l {
					font-family: PingFang;
					font-weight: 500;
					font-size: 32rpx;
					color: #000000;
					line-height: 100rpx;
					height: 96rpx;
					text-align: left;
				}

				.cent-bo-m {
					font-family: PingFang;
					font-weight: 500;
					font-size: 30rpx;
					color: #000000;
					line-height: 100rpx;
					margin: 0 82rpx;
					text-align: left;
				}

				.cent-bo-r {
					font-family: PingFang;
					font-weight: 500;
					font-size: 30rpx;
					color: #666666;
					line-height: 100rpx;
					text-align: left;
				}
			}
		}
	}
	.top-r{
		display: flex;
	}
    .cont{
		height: 906rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 0 30rpx;
	}
	.top-r-b{
		font-family: PingFang;
		font-weight: bold;
		font-size: 36rpx;
		color: #000000;
		line-height: 30rpx;
		margin-left: 31rpx;
		width: 80rpx;
	}
	.cent-bo-b-r-b {
            font-family: PingFang;
            font-weight: 500;
            font-size: 30rpx;
            color: #666666;
            line-height: 42rpx;
			width:419rpx;
			height:90rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }
	.top-r-m{
		width: 2rpx;
		height: 32rpx;
		background: #C7C7C7;
		margin: 0 37rpx;
	}
	.top-r-t{
		font-family: PingFang;
		font-weight: 500;
		font-size: 32rpx;
		color: #333333;
		line-height: 30rpx;
	}
	.model{
		font-family: PingFang;
		font-weight: 500;
		font-size: 30rpx;
		color: #333333;
		line-height: 44rpx;
	}
	.images{
		width: 100%;
		height: 340rpx;
		margin: 27rpx 0 31rpx;
		image{
			width: 100%;
			height: 340rpx;
		}
	}
	
	.top{
		display: flex;
		padding-top: 24rpx;
	}
	.top-l{
		image{
			width: 180rpx;
			height: 180rpx;
		}
	} 
	.cent-bo {
		.cent-bo-b {
			height: 200rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			margin-bottom: 20rpx;
			display: flex;

			.cent-bo-b-l {
				.cent-bo-b-img {
					width: 200rpx;
					height: 140rpx;
					margin: 30rpx 21rpx;
				}
			}

			.cent-bo-b-r {
				.cent-bo-b-r-t {
					margin-top: 30rpx;
					margin-bottom: 35rpx;

					.cent-bo-b-l {
						font-family: PingFang;
						font-weight: bold;
						font-size: 32rpx;
						color: #000000;
						line-height: 30rpx;
						display: flex;

						.cent-bo-b-r {
							margin-left: 25rpx;
						}
					}

					
				}
			}
		}

	}
</style>
	